<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>HiAuth</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="pragma" content="pragma">
    <meta http-equiv="cache-control" content="max-age=30">
    <link rel="icon" th:href="@{/static/favicon.ico}">

    <link th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/static/bootstrap/css/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/static/bootstrap/css/bootstrapValidator.min.css}" rel="stylesheet">

    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/bootstrap/js/bootstrapValidator.min.js}"></script>

    <link th:href="@{/static/css/signin.css}" rel="stylesheet">
    <script th:src="@{/static/js/signin.js}"></script>

</head>
<body class="bg2">

<div class="container signin">

    <div class="row">

        <div class="col-md-4 col-md-offset-9">

            <div class="form-signin" style="margin: 100px auto;">

                <div class="panel panel-default">

                    <div class="panel-heading" style="padding: 10px 10px 0px 10px;">
                        <ul id="myTab" class="nav nav-pills">
                            <li class="active"><a href="#account-login" class="login-tab-btn" data-toggle="tab">账号登录</a></li>
                            <li class=""><a href="#tel-login" class="login-tab-btn" data-toggle="tab">手机登录</a></li>
                        </ul>
                    </div>

                    <div class="panel-body">
                        <div id="loginTabContent" class="tab-content" style="padding-top: 10px">
                            <div class="tab-pane fade in active" id="account-login">
                                <form id="accountForm" th:action="@{/signin/form/account}" method="post">
                                    <input type="hidden" id="formToken1" name="formToken" th:value="${formToken}">

                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user-o fa-fw"></i></span>
                                            <input class="form-control input-lg" type="text" name="username" id="username" value="admin" placeholder="账号" aria-describedby="usernameSuccessStatus" required>
                                        </div>
                                        <span id="usernameSuccessStatus" class="sr-only">(success)</span>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                                            <input class="form-control input-lg" type="password" name="password" id="password" value="123456" placeholder="密码" aria-describedby="passwordSuccessStatus" required>
                                        </div>
                                        <span id="passwordSuccessStatus" class="sr-only">(success)</span>
                                    </div>

                                    <div class="form-group">
                                        <label for="yzm" class="sr-only">验证码</label>
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-lock fa-fw"></i></div>
                                            <input class="form-control input-lg" type="text" name="yzm" id="yzm" value="" placeholder="验证码"/>
                                            <div class="input-group-addon" style="padding: 0px;"><img class="yzm-img" style="width: 120px;"/></div>
                                        </div>
                                    </div>

                                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="tel-login">
                                <form id="telForm" th:action="@{/signin/form/tel}" method="post">
                                    <input type="hidden" id="formToken2" name="formToken" th:value="${formToken}">

                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-mobile fa-fw"></i></span>
                                            <input class="form-control input-lg" type="text" name="telNo" id="telNo" value="13712345678" placeholder="手机号码" aria-describedby="telNoSuccessStatus" required>
                                        </div>
                                        <span id="telNoSuccessStatus" class="sr-only">(success)</span>
                                    </div>

                                    <div class="form-group">
                                        <label for="yzm1" class="sr-only">验证码</label>
                                        <div class="input-group">
                                            <div class="input-group-addon"><i class="fa fa-lock fa-fw"></i></div>
                                            <input class="form-control input-lg" type="text" name="yzm" id="yzm1" value="" placeholder="验证码" />
                                            <div class="input-group-addon" style="padding: 0px;"><img class="yzm-img" style="width: 120px;"/></div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
                                            <input class="form-control input-lg" type="text" name="smsCode" id="smsCode" value="" placeholder="短信验证码" aria-describedby="smsCodeSuccessStatus" required>
                                            <span class="input-group-btn btn-group-lg">
                                                <button class="btn btn-default btn-lg sms-code-btu" type="button">获取验证码</button>
                                            </span>
                                        </div>
                                        <span id="smsCodeSuccessStatus" class="sr-only">(success)</span>
                                    </div>

                                    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
                                </form>
                            </div>
                            <small style="color: #a94442;" class="help-block" th:if="${param.error}" th:text="${session.SPRING_SECURITY_LAST_EXCEPTION} ? ${session.SPRING_SECURITY_LAST_EXCEPTION.message}"></small>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

</body>
</html>